<!-- 考试订单申请 -->
<template>
    <TitleInfo title="考试申请订单"></TitleInfo>
    <el-table :data="tableData" border style="width: 100%" v-show="!isPay">
        <el-table-column prop="date" label="订单编号" />
        <el-table-column prop="name" label="申请时间" />
        <el-table-column prop="address" label="缴费时间" />
        <el-table-column prop="address" label="缴费明细" />
        <el-table-column prop="address" label="费用" />
        <el-table-column prop="address" label="状态" />
        <el-table-column label="操作">
            <template #default="scope">
                <el-button size="small" type="primary" @click="pay(scope.$index, scope.row)">
                    支付
                </el-button>
                <el-button size="small" type="danger">
                    取消
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <Pay v-show="isPay" @submit="submit" @cancel="cancel"></Pay>
</template>
<script setup>
import TitleInfo from "../../components/title_info.vue"
import Pay from "../../components/Pay.vue"
const tableData = [
    {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
]
let isPay = ref(false)
const pay = () => {
    isPay.value = true;
}
const submit = () => {

}
const cancel = (val) => {
    isPay.value = val;
}
</script>
<style scoped lang='less'>
:deep(thead .el-table .cell) {
    line-height: 30px;
    text-align: center;
    font-size: 18px;
}

:deep(thead tr th) {
    background: #345aa3 !important;
    ;
    color: #ffffff;
}

:deep(.el-table tr) {
    background-color: #f6f6f68c;
}

:deep(.el-table__body) {
    background-color: #f6f6f68c;
}
</style>